<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="form" label-width="100px" :inline="true">
      <el-form-item label="流程名称">
        <el-input v-model="queryParams.processName" placeholder="请输入流程名称" size="small" clearable/>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button style="margin-left: 10px" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="todoTaskList" v-loading="loading" highlight-current-row>
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="流程名称" align="center" prop="processName" :show-overflow-tooltip="true"/>
      <el-table-column label="任务名称" align="center" prop="currentNodeName" :show-overflow-tooltip="true"/>
      <el-table-column label="处理人" align="center" prop="userName" width="100px"/>
      <el-table-column label="到达时间" align="center" prop="startTime" :show-overflow-tooltip="true"/>
      <el-table-column label="处理时间" align="center" prop="dealDate" width="160px"/>
      <el-table-column label="耗时" align="center" prop="timeConsuming" :show-overflow-tooltip="true"/>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" @click="handleHistory(scope.row)" size="mini" icon="el-icon-tickets"
                     v-if="scope.row.isFake === '1'">审批记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
            v-show="total>0"
            :total="total"
            :page.sync="pageParams.page"
            :limit.sync="pageParams.rows"
            @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="openHistory" v-if="openHistory" width="800px" append-to-body>
      <el-tabs>
        <el-tab-pane label="流程进度">
          <el-table :data="historyInfoList" border stripe style="width: 100%" max-height="300">
            <el-table-column label="流程审批历史记录" align="center">
              <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
              <el-table-column prop="NodeName" label="任务名称" align="center"></el-table-column>
              <el-table-column prop="UserName" label="处理人" align="center"></el-table-column>
              <el-table-column prop="ActionName" label="状态" align="center"></el-table-column>
              <el-table-column prop="Remark" label="审批意见" align="center"></el-table-column>
              <el-table-column prop="StartTime" label="开始时间" align="center"></el-table-column>
              <el-table-column prop="EndTime" label="结束时间" align="center"></el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="流程图">
          <div style="height: 877px;" >
            <iframe :src="iframeUrl"
                    scrolling="no" frameborder="0" style="display: block; height: 100%; width: 100%;"></iframe>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import {getToDoTaskList, haveDone, historyInfoList} from "@/api/workflow/workFlow"
  import {getuserCode} from "@/utils/userCode";

  export default {
    data() {
      return {
        // 遮罩层
        loading: false,
        // 任务页开关
        open: false,
        // 任务页标题
        title: '',
        // 业务表单路径
        link: '',
        // 业务id
        businessId: '',
        // 流程参数
        processParams: {},
        // 待办信息
        todoTaskList: [],
        total: 0,
        // 分页参数
        pageParams: {
          page: 1,
          rows: 10
        },
        // 查询参数
        queryParams: {
          // 0：待办，1：已办
          todoTaskStatus: '1'
        },
        // 审批记录开发
        openHistory: false,
        // 历史记录
        historyInfoList: [],
        // 流程图
        iframeUrl: undefined,
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 查询
      getList() {
        this.loading = true
        // this.queryParams.userId = getuserCode()
        haveDone({
          'pageParameter': this.pageParams,
          'searchParams': this.queryParams
        }).then(response => {
          this.todoTaskList = response.responseBody.result
          this.total = response.responseBody.pageParameter.totalCount
        }).finally(() => {
          this.loading = false
        })
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },

      reset () {
        this.queryParams = {
          // 0：待办，1：已办
          todoTaskStatus: '1'
        }
        this.getList()
      },

      closeForm() {
        this.open = false
      },

      // 审批记录
      async handleHistory (row) {
        // 根据用户id及业务id查询流程实例id
        let todoTaskList
        await getToDoTaskList({userId: getuserCode(), businessId: row.businessId}).then(resp => {
          todoTaskList = resp
        })
        console.log(todoTaskList[0].docUnid, row.businessId)
        // 根据流程实例id查询流程历史记录
        const { responseBody } = await historyInfoList({"docUnid":todoTaskList[0].docUnid});
        this.historyInfoList = responseBody.rows;
        this.iframeUrl = "http://188.188.10.38:8080/osbpm/rule?wf_num=R_S003_B068&Processid=" + todoTaskList[0].processId + "&DocUnid=" + todoTaskList[0].docUnid;
        this.openHistory = true
      }
    }
  }
</script>
